<template>
	<view class="content">
		<img style="width: 100%;height: 100%;position: absolute;z-index: -1;" src="../../static/img/bg.jpg" alt="" />
		<view class="login">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="username" style="color: #fff;">
					<u-input prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #fff" v-model="form.username"
						placeholder="请输入登陆账号" border="bottom" clearable/>
				</u-form-item>
				<u-form-item prop="password" style="color: #fff;">
					<u-input prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #fff" type="password"
						v-model="form.password" placeholder="请输入密码" border="bottom" clearable/>
				</u-form-item>
			</u-form>
			<view style="margin-top: 50rpx">
				<u-button @click="submit" type="primary" style="border-radius: 50rpx !important">登录</u-button>
				<!-- <view class="forgetPassword" @click="forgetPassWord">忘记密码</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		clearStorageSync,
		setStorageSync,
		getStorageSync,
		useRouter
	} from '@/utils/utils.js';

	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				datas: {
					userId: '',
					inputValue: '',
					inputPassword: '',
					customerName: '',
					address: '',
					usercode: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入帐号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}]
				}
			};
		},
		methods: {
			submit() {
				const data = {
					username: this.form.username,
					password: this.form.password
				};
				setStorageSync('username', this.form.username);
				this.$newapi.login(data).then((res) => {
					if (res.code == 200) {
						toast('登录成功');
						setStorageSync('token', res.data);
						getApp().globalData.token = res.data;
						this.$newapi.getUserInfo().then((resp) => {
							getApp().globalData.id = resp.data.id;
							getApp().globalData.cellphone = resp.data.cellphone;
							getApp().globalData.customerAddress = resp.data.customerAddress;
							getApp().globalData.customerName = resp.data.customerName;
							getApp().globalData.itemName = resp.data.itemName;
							getApp().globalData.itemNo = resp.data.itemNo;
							getApp().globalData.shop = resp.data.shop;
							getApp().globalData.username = resp.data.username;
							getApp().globalData.utype = resp.data.utype;
							this.$nextTick(() => {
								useRouter('/pages/index/list', {}, 'switchTab');
							});
						});
					} else {
						toast(res.msg);
					}
				}).catch((err) => {
					toast(err);
				});
			},
			/* forgetPassWord() {
				useRouter('/pages/public/forget_password');
			} */
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			if (getStorageSync('username')) {
				this.form.username = getStorageSync('username');
			}
		}
	};
</script>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-button--primary {
		background-color: #efefef !important;
		color: #222 !important;
		font-size: 28rpx !important;
		border-color: #efefef !important;
		width: 100% !important;
		height: 80rpx !important;
	}

	::v-deep .u-input__content {
		font-size: 28rpx !important;
		height: 60rpx !important;
	}

	.content {
		// padding: 520rpx 10rpx 0 10rpx;
		width: 100%;
		height: 100%;
		/* background-image: url(https://www.bjroyalkitchen.com/images/root/2.png);
		background-repeat: no-repeat;
		background-size: 100% 100%; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	::v-deep.u-button {
		border-radius: 50rpx !important;
	}

	.login {
		width: 70%;

		::v-deep.u-input__input::placeholder {
			color: #ffffff !important;
		}

		::v-deep.u-form-item__body__left__content__label {
			color: #ffffff !important;
		}

		::v-deep.u-form-item__body__right__message {
			color: #ffffff !important;
		}

		::v-deep.u-input__content__field-wrapper__field {
			color: #ffffff !important;
		}
	}

	.title {
		text-align: center;
		margin: 80rpx 0 0 0;
	}

	.reg {
		float: right;
		padding: 30rpx 0 30rpx 0;
		color: #fff;
	}

	.forgetPassword {
		float: left;
		padding: 30rpx 0 30rpx 0;
		color: #fff;
	}

	@media (min-width: 768px) {
		.forgetPassword {
			font-size: 20rpx;
		}

		::v-deep .u-input__content__field-wrapper__field {
			font-size: 20rpx !important;
		}

		::v-deep .u-button {
			width: 80% !important;
			height: 60rpx !important;
			font-size: 20rpx !important;
		}
	}

	@media (max-width: 767px) {}
</style>